import React from 'react';
// import '../css/Login/Login.css';

interface UploadModalProps {
  visible: boolean;
  onClose: () => void;
  onUpload: (type: string, files: FileList) => void;
}

const uploadOptions = [
  {
    icon: '🖼️',
    title: '上传图片',
    desc: '支持jpg、png、gif、svg，建议单个图片不超过20M（提升加载效率），单次不超过20张',
    btn: '本地上传',
    qrText: '微信"扫一扫"上传手机图片',
    accept: 'image/*',
    multiple: true,
    type: 'image',
  },
  {
    icon: '▶️',
    title: '上传视频',
    desc: '支持mp4、mov，建议单个视频不超过200M（提升加载效率），单次只能上传1个',
    btn: '本地上传',
    qrText: '微信"扫一扫"上传手机视频',
    accept: 'video/*',
    multiple: false,
    type: 'video',
  },
  {
    icon: '🎵',
    title: '上传音乐',
    desc: '支持mp3、wav、ogg、m4a，大小不超过10M',
    btn: '本地上传',
    qrText: '微信"扫一扫"上传手机音乐',
    accept: 'audio/*,.mp3,.wav,.ogg,.m4a',
    multiple: false,
    type: 'music',
  },
  {
    icon: '🔲',
    title: '上传二维码',
    desc: '支持jpg、png、gif、svg，不超过5M，单次不超过20张',
    btn: '本地上传',
    qrText: '微信"扫一扫"上传手机二维码',
    accept: 'image/*',
    multiple: true,
    type: 'qrcode',
  },
];

const UploadModal: React.FC<UploadModalProps> = ({ visible, onClose, onUpload }) => {
  if (!visible) return null;
  return (
    <div className="upload-modal-overlay">
      <div className="upload-modal">
        <div className="upload-modal-header">
          <span>上传素材</span>
          <span className="upload-modal-close" onClick={onClose}>×</span>
        </div>
        <div className="upload-modal-content">
          {uploadOptions.map((opt, idx) => (
            <div className="upload-card" key={idx}>
              <div className="upload-card-icon">{opt.icon}</div>
              <div className="upload-card-title">{opt.title}</div>
              <div className="upload-card-desc">{opt.desc}</div>
              <button className="upload-card-btn" onClick={() => document.getElementById(`upload-input-${idx}`)?.click()}>{opt.btn}</button>
              <input
                id={`upload-input-${idx}`}
                type="file"
                accept={opt.accept}
                multiple={opt.multiple}
                style={{ display: 'none' }}
                onChange={e => {
                  if (e.target.files && e.target.files.length > 0) {
                    onUpload(opt.type, e.target.files);
                    e.target.value = '';
                  }
                }}
              />
              <div className="upload-card-qr-text">{opt.qrText}</div>
              <div className="upload-card-qr-placeholder" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default UploadModal; 